<template>
<section v-loading="loading" @contextmenu="$parent.addMenu([{name:'刷新约车记录',method:'getData',icon:'icon-shuaxin'}])">
   <!-- 查询框 -->
   <!-- <div class="searchbox"></div> -->
   <!-- 主体内容 -->
   <div class="record rec-left">
      <table width="80%" height="288" border="1" cellspacing="0" cellpadding="0" style="margin:0 auto;font-size:13px;color:#666">
         <caption class="rec-title">科目二</caption>
         <thead>
            <tr style="background:#f7f9fd;">
               <th height="50" align="center">点/日期</th>
               <th align="center" v-for="item in datelist">{{item}}</th>
            </tr>
         </thead>
         <tbody>
            <tr align="center" v-for="item in slo">
               <td height="58" width="97">{{item}}点</td>
               <td class="rec-td" v-for="i in [0,1,2,3]" @click="dialog(item,i,2)">{{km2_list[item]?km2_list[item][i]:0}}</td>
            </tr>
         </tbody>
      </table>
   </div>
   <div class="record rec-right">
      <table width="80%" height="288" border="1" cellspacing="0" cellpadding="0" style="margin:0 auto;font-size:13px;color:#666">
         <caption class="rec-title">科目三</caption>
         <thead>
            <tr style="background:#f7f9fd;">
               <th height="50" align="center">点/日期</th>
               <th align="center" v-for="item in datelist">{{item}}</th>
            </tr>
         </thead>
         <tbody>
            <tr align="center" v-for="item in slo">
               <td height="58" width="97">{{item}}点</td>
               <td class="rec-td" v-for="i in [0,1,2,3]" @click="dialog(item,i,3)">{{km3_list[item]?km3_list[item][i]:0}}</td>
            </tr>
         </tbody>
      </table>
   </div>

   <el-dialog title="约车记录" :visible.sync="readVisible" width="600px">
      <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="text-align:center">
         <el-table-column prop="real_name" label="学员姓名"></el-table-column>
         <el-table-column prop="mobile" label="手机号"></el-table-column>
         <el-table-column prop="coach_name" label="预约教练"></el-table-column>
      </el-table>
      <div slot="footer">
         <el-button @click="readVisible=false">确 定</el-button>
      </div>
   </el-dialog>
</section>
</template>

<script>
import * as api from '../api/index'
export default {
   name: 'yueche',
   data() {
      return {
         m: 'yueche',
         multipleSelection: [],
         slo:[8,9,10,11,12,13,14,15,16,17],
         readVisible:false,
         list:[],
      }
   },
   computed: {
      km2_list() {
         return this.$store.state[this.m].km2;
      },
      km3_list() {
         return this.$store.state[this.m].km3;
      },
      loading() {
         return this.$store.state[this.m].loading;
      },
      datelist(){
         return this.$store.state[this.m].date;
      }
   },
   methods: {
      getData() { //更新列表数据
         this.$store.dispatch( this.m + '/getData',{} );
      },
      dialog(item,i,km){
         var search = {};
         search.book_time = item;
         search.book_date = this.datelist[i];
         search.km = km;
         api.yueche.search(search, res => {
            this.list = res.data;
            this.readVisible = true;
         });
      },

   },
   created() {
      this.getData();
   }
}
</script>

<style scoped>
/*约车记录*/
table{border-collapse: collapse;border-spacing: 0}
table td,table th{border:1px solid #eee;}
.record{background:#fff;width: 48%;padding:0 0 70px}
.rec-title{font-size:16px;color:#333;text-align: center;padding:30px 0;font-weight:bold}
.record th{text-align:center!important}
.record .rec-td{width:150px}
.record .rec-td:hover{background:#f7f9fd}
.rec-left{float:left;margin-right:20px}
.rec-right{float:left}
</style>
